<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>css外层DIV半透明内层div不透明-弹出层效果的实现【实例】</title>
    <style type="text/css">
        <!--
        body,
        td,
        th {
            font-size: 12px;
            padding: 0;
            margin: 0;
        }

        .tanchuang_wrap {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0px;
            top: 0px;
            z-index: 100;
            display: none;
        }

        .lightbox {
            width: 100%;
            z-index: 101;
            height: 100%;
            background-color: red;
            filter: alpha(Opacity=20);
            -moz-opacity: 0.2;
            opacity: 0.2;
            position: absolute;
            top: 0px;
            left: 0px;
        }

        .tanchuang_neirong {
            width: 60%;
            height: 500px;
            border: solid 1px #f7dd8c;
            background-color: #FFF;
            position: absolute;
            z-index: 105;
            left: 25%;
            top: 123px;
        }
        -->
    </style>
    <script language="javascript">
        function closeDiv(divId) {
            document.getElementById(divId).style.display = 'none';
        }
        function displayDiv(divId) {
            document.getElementById(divId).style.display = 'block';
        }
    </script>
</head>

<body>
    <div style="width:1920px; height:1080px; position:relative; text-align:center;">
        <div class="tanchuang_wrap" id="aaaa">
            <div class="lightbox"></div>
            <div class="tanchuang_neirong">
                <p><span onClick="closeDiv('aaaa')" style=" cursor:pointer;">关闭</span></p>
                这里是弹窗内容
            </div>
        </div>
        <span onclick="displayDiv('aaaa')" style="cursor:pointer;">点击我</span>
        <p>测试通过，兼容IE6.0、IE7.0、火狐3.6、遨游等各大浏览器</p>
    </div>
</body>

</html>